<!-- eslint-disable vue/no-useless-template-attributes -->
<template>
  <div class="home">
    <a-layout>
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
          后台管理
        </div>
        <div class="button"><button>+ 新建</button></div>
        <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
          <router-link to="/staging">
            <a-menu-item key="staging">
              <DashboardOutlined />
              <span>工作台</span>
            </a-menu-item>
          </router-link>
          <a-sub-menu key="sub1">
            <template #title>
              <span>
                <FormOutlined />
                <span>文章管理</span>
              </span>
            </template>
            <router-link to="/allessay">
              <a-menu-item key="allessay">
                <FormOutlined />
                所有文章
              </a-menu-item>
            </router-link>
            <router-link to="/classify">
              <a-menu-item key="classify">
                <CopyOutlined />
                分类管理
              </a-menu-item>
            </router-link>
            <router-link to="/label">
              <a-menu-item key="label">
                <TagOutlined />
                标签管理
              </a-menu-item>
            </router-link>
          </a-sub-menu>
          <router-link to="/page">
            <a-menu-item key="page">
              <FileTextOutlined />
              <span>页面管理</span>
            </a-menu-item>
          </router-link>
          <router-link to="/knowledge">
            <a-menu-item key="knowledge">
              <BookOutlined />
              <span>知识小册</span>
            </a-menu-item>
          </router-link>
          <router-link to="/bill">
            <a-menu-item key="bill">
              <StarOutlined />
              <span>海报管理</span>
            </a-menu-item>
          </router-link>
          <router-link to="/commenton">
            <a-menu-item key="commenton">
              <MessageOutlined />
              <span>评论管理</span>
            </a-menu-item>
          </router-link>
          <router-link to="/email">
            <a-menu-item key="email">
              <MailOutlined />
              <span>邮件管理</span>
            </a-menu-item>
          </router-link>
          <router-link to="/document">
            <a-menu-item key="document">
              <FolderOpenOutlined />
              <span>文件管理</span>
            </a-menu-item>
          </router-link>
          <router-link to="/search">
            <a-menu-item key="search">
              <SearchOutlined />
              <span>搜索记录</span>
            </a-menu-item>
          </router-link>
          <router-link to="/visit">
            <a-menu-item key="visit">
              <ProjectOutlined />
              <span>访问统计</span>
            </a-menu-item>
          </router-link>
          <router-link to="/user">
            <a-menu-item key="user">
              <UserOutlined />
              <span>用户管理</span>
            </a-menu-item>
          </router-link>
          <router-link to="/system">
            <a-menu-item key="system">
              <SettingOutlined />
              <span>系统设置</span>
            </a-menu-item>
          </router-link>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <div
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined
              v-else
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <div
              style="display: flex; align-items: center; padding-right: 20px"
            >
              <li>
                <a-avatar size="small">
                  <template #icon>
                    <UserOutlined />
                  </template>
                </a-avatar>
              </li>
              &nbsp;

              <a-popover trigger="hover">
                <template #content style="font-size: 12px">
                  <p>个人设置</p>
                  <p @click="leaveLogin">退出登录</p>
                </template>
                <span>Hi,{{ `欢迎` + name }}</span>
              </a-popover>
            </div>
          </div>
        </a-layout-header>
        <router-view />
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import router from '../router/index'
import {
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DashboardOutlined,
  FormOutlined,
  CopyOutlined,
  TagOutlined,
  SettingOutlined,
  UserOutlined,
  SearchOutlined,
  StarOutlined,
  FileTextOutlined,
  BookOutlined,
  MessageOutlined,
  FolderOpenOutlined,
  ProjectOutlined,
  MailOutlined
} from '@ant-design/icons-vue'
import OneView from '../components/OneView.vue'

export default defineComponent({
  components: {
    DashboardOutlined,
    // eslint-disable-next-line vue/no-unused-components
    VideoCameraOutlined,
    // eslint-disable-next-line vue/no-unused-components
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    FormOutlined,
    CopyOutlined,
    TagOutlined,
    SettingOutlined,
    // eslint-disable-next-line vue/no-unused-components
    OneView,
    UserOutlined,
    StarOutlined,
    FileTextOutlined,
    BookOutlined,
    MailOutlined,
    FolderOpenOutlined,
    MessageOutlined,
    ProjectOutlined,
    SearchOutlined
  },

  setup() {
    // const state = reactive({
    // })
    const leaveLogin = () => {
      localStorage.clear()
      router.push('/login')
    }
    return {
      name: localStorage.getItem('username'),
      selectedKeys: ref(['staging']),
      collapsed: ref<boolean>(false),
      leaveLogin
    }
  }
})
</script>

<style lang="scss">
.home {
  width: 100vw;
  height: 100vh;

  .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
    .ant-menu-item-selected {
    background: #001529;
    color: #1890ff;
  }
  .ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon + span,
  .ant-menu-dark .ant-menu-item-selected .anticon + span {
    color: #1890ff;
  }
  .ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
  .ant-menu-dark .ant-menu-item-selected .anticon {
    color: #1890ff;
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 6px;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    // border-radius: 10px;
    background: #ccc;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }
  .ant-layout-sider {
    overflow-y: scroll;
  }

  .button {
    display: flex;
    justify-content: center;

    button {
      width: 75%;
      height: 40px;
      border-radius: 5px;
      color: #fff;
      background: #1890ff;
    }
  }
  .ant-layout {
    width: 100vw;
    height: 100vh;

    .logo {
      display: flex;
      justify-content: center;
      color: #fff;
      font-size: 25px;
      align-items: center;

      img {
        width: 25px;
        height: 25px;
      }
    }

    h2 {
      color: #fff;
    }
  }
}
</style>
